<template>
  <q-input class="a-q-input" v-bind="$attrs" @focus="当focus" @blur="显清除 = false" :clearable="显清除" ref="ip"
    :style="style">
    <slot />
    <template #prepend><!-- 使用quasar的具名插槽 -->
      <slot name="prepend" /><!-- 定义具名插槽，供外部使用 -->
    </template>
    <template #append>
      <slot name="append" />
    </template>
    <template #before>
      <slot name="before" />
    </template>
    <template #after>
      <slot name="after" />
    </template>
    <template #label>
      <slot name="label" />
    </template>
  </q-input>
</template>

<script setup>
import { ref, watch, computed, nextTick, } from 'vue';
const props = defineProps({
  wd: {
    type: Number,
  },
})
const { wd } = props
const style = computed(() => {
  let res = {}
  // 非展开选项
  if (wd) {
    res.width = `${wd}px`
  }
  return res
})

const ip = ref(null)
// console.log(`ip 👉`, ip)
const 显清除 = ref(false)
// const modelValue = defineModel()
watch(() => ip.value?.modelValue, (newValue, oldValue) => {
  if (newValue) {
    // console.log(`newValue 👉`, newValue)
    if (是focus.value) {
      予显清除()
    }
  }
})

const 是focus = ref(false)

function 当focus() {
  是focus.value = true
  予显清除()
}

async function 予显清除() {
  // console.log(`ip 👉`, ip.value.modelValue)
  if (ip.value.modelValue != null) {
    显清除.value = true;
  }
  await nextTick()
  const icons = document.querySelectorAll('.a-q-input .q-icon.q-field__focusable-action');
  // console.log(`icons 👉`, icons);
  icons.forEach((icon) => {
    if (icon) {
      icon.removeAttribute('tabindex');
    }
  });
}
</script>
